<template>
	<view class="content">
		
		<block v-if="step==1">
		
			<view class="content-input">
				<view class="item-input">
					<view class="item-input-left">门店名称</view>
					<view class="item-input-right">
						<input request v-model="shopName" class="uni-input" maxlength="20" placeholder="请输入门店名称" placeholder-style="color:#C8C7CC" />
					</view>
				</view>
				
				<view class="item-input">
					<view class="item-input-left">门店电话</view>
					<view class="item-input-right">
						<input request v-model="phone" class="uni-input" maxlength="20" placeholder="填写手机号/座机号(加区号)" placeholder-style="color:#C8C7CC" />
					</view>
				</view>
			</view>
			
			<view class="content-input">
				<view class="item-input">
					<view class="item-input-left">经营品类</view>
					<view class="item-input-right">
						<view class="item-select">
							
							<picker @change="pickerChangeBusiness($event)" :value="businessTypeIndex" :range="businessSecondTypeList" range-key="value">
								<view class="uni-input">{{businessSecondTypeList[businessTypeIndex].value}}</view>
							</picker>
							
							<image style="width: 18rpx;height: 18rpx;" class="item-select-arrow" src="/static/static/arrow.png"></image>
						</view>
					</view>
				</view>
				
				<view class="item-input">
					<view class="item-input-left">经营状态</view>
					<view class="item-input-right">
						<view class="item-radio">
							<radio-group @change="radioChange">
								<label v-for="(item, index) in businessStateGroup" :key="index" :item="item">
									<view class="item-radio-btn">
										<radio :value="item.val" :checked="item.val === businessState" color="#00D5D4" style="transform:scale(0.8)" />
									</view>
									<view class="item-radio-txt">{{item.name}}</view>
								</label>
							</radio-group>
						</view>
					</view>
				</view>
				
				<block v-if="businessState==1">
					<view class="item-input-image" v-if="!headImg">
						<view class="item-input-left">上传门店头像</view>
						<view class="item-input-upload">
							<image src="/static/static/avator-init.png" @click="handlerImg" mode="aspectFit"></image>
						</view>
					</view>
					
					<view class="item-input-image" v-if="headImg">
						<view class="item-input-left">上传门店头像</view>
						<view class="item-input-upload">
							<image :src="headImg" @click="handlerImg" mode="aspectFit"></image>
						</view>
					</view>
					
					<image-cropper :src="cj" @confirm="confirm" @cancel="cancel"></image-cropper>
				</block>
				
			</view>
			
			<view class="input-bottom">
				<view class="submit-btn" @click="submitSeptOne">确认创建</view>
			</view>
		
		</block>
		
		<block v-if="step == 2">
			<view class="input-top">
				<view class="input-top-shopname">{{shopName}}</view>
				<view class="input-top-address">{{shopInfo.detailAddress}}</view>
				<view class="input-top-btn" @click="toStepOne">修改</view>
			</view>
			
			<view class="input-image-con">
				<view class="item-input-image">
					<view class="item-input-left">营业执照信息</view>
					<view class="item-input-license">
						<image v-if="!licenseImg" src="/static/static/license-init.png" @click="handlerImgLicense" mode="aspectFit"></image>
						<image v-else :src="licenseImg" @click="handlerImgLicense" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			
			<view class="input-image-con">
				<view class="item-input-image">
					<view class="item-input-left">法人实名认证</view>
					<view class="item-input-tips">需上传营业执照中的法人身份证明</view>
					<view class="item-input-idcard">
						<image v-if="!idcardFrontImg" src="/static/static/idcard-front-init.png" @click="handlerImgIDcardFront" mode="aspectFit"></image>
						<image v-else :src="idcardFrontImg" @click="handlerImgIDcardFront" mode="aspectFit"></image>
						
						<image v-if="!idcardBehindImg" src="/static/static/idcard-behind-init.png" @click="handlerImgIDcardBehind" mode="aspectFit"></image>
						<image v-else :src="idcardBehindImg" @click="handlerImgIDcardBehind" mode="aspectFit"></image>
						
					</view>
				</view>
			</view>
			
			<view class="input-bottom">
				<view class="submit-left-btn" @click="saveSeptTwo">保存草稿</view>
				<view class="submit-right-btn" @click="submitSeptTwo">提交审核</view>
			</view>
			
		</block>
		
		
	</view>
</template>

<script>
	import {loginOut} from '../my/api';
	import {submitShopInformation} from './api';
	import CONSTS from '@/src/consts';
	import ImageCropper from "@/src/pages/my/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	import uniPopup from '@/src/pages/components/uni-popup/uni-popup.vue';
	
	export default {
		data() {
			return {
				basic:CONSTS.BASE_URL+'/basic',
				userInfo:{},
				shopInfo:{},
				saveInfo:{},
				step:1,
				businessTypeIndex:0,
				businessTypeShow:false,
				businessSecondTypeList:[
					{name:"0",value:"请选择所经营品类"},
				],
				businessStateGroup:[
					{
						name:'营业中',
						val:'1',
					},
					{
						name:'筹建中',
						val:'2',
					}
				],
				firstManagementTypeId:0,
				childTypeId:0,
				showType:'请选择所经营品类',
				shopName:'',
				phone:'',
				businessState:'1',
				headImg:'',
				cj:'',
				headPath:'',
				licenseImg:'',
				licenseImgPath:'',
				idcardFrontImg:'',
				idcardFrontImgPath:'',
				idcardBehindImg:'',
				idcardBehindImgPath:''
			}
		},
		components: { uniPopup,ImageCropper },
		onLoad:function(){
			
			const _self = this;
			uni.getStorage({
			    key: 'userInfo',
			    success: function (res) {
					
			        _self.userInfo = res.data;
					_self.firstManagementTypeId = _self.userInfo.firstManagementTypeId;
					
					//已提交过，跳转
					/*
					if(_self.userInfo.toExamine == 0) {
						uni.switchTab({
						    url: '/src/pages/index/index'
						});
					}
					*/
				   
				   //获取二级分类列表
				   const param = {
				     parentId: _self.firstManagementTypeId,
				   }
				   uni.request({
				       url: CONSTS.BASE_URL + CONSTS.API_BUSINESS_TYPE_FIND_PATH, 
				       data: param,
					   method:"POST",
				       header: {
				           'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' //自定义请求头信息
				       },
				       success: (res) => {
				           //console.log(res.data.data);
						   //_self.businessSecondTypeList = res.data.data;
						   
						   if(res.data.code==200){
							   let obj = res.data.data;
							    for (let i in obj) {
							   		var arr = {
										name:obj[i].managementId,
										value:obj[i].managementName
							   		}
							        _self.businessSecondTypeList.push(arr); //属性
							        
							    }
							    
								
								
								
								//加载填过的资料
								uni.getStorage({
								    key: 'saveInfo',
								    success: function (res) {
										let saveInfo = res.data;
										
										console.log(saveInfo);
										
										//step1
										_self.shopName = saveInfo.shopName;
										_self.phone = saveInfo.phone;
										_self.childTypeId = saveInfo.childTypeId;
										_self.businessState = saveInfo.businessState;
										_self.headPath = saveInfo.headPath;
										_self.headImg = saveInfo.headImg;
										_self.businessTypeIndex = saveInfo.businessTypeIndex;
										
										//step2
										_self.licenseImgPath = saveInfo.licenseImgPath;
										_self.idcardFrontImgPath = saveInfo.idcardFrontImgPath;
										_self.idcardBehindImgPath = saveInfo.idcardBehindImgPath;
										_self.licenseImg = saveInfo.licenseImg;
										_self.idcardFrontImg = saveInfo.idcardFrontImg;
										_self.idcardBehindImg = saveInfo.idcardBehindImg;
										
										
									},
									fail:function(err){
										
									}
								});
								
								
						   }else{
							   loginOut();
						   }
						   
				       }
				   });
				   
				   
				   //获取店铺信息
				   //API_SHOP_INFO_PATH
				   
				   uni.request({
				       url: CONSTS.BASE_URL + CONSTS.API_SHOP_INFO_PATH, 
				       data: {},
				       method:"POST",
				       header: {
				           'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' ,//自定义请求头信息
				   		   'Access-token': _self.userInfo.accessToken
				       },
				       success: (res) => {
				           console.log(res.data.data);
						   if(res.data.code==200){
							   _self.shopInfo = res.data.data;
							   uni.setStorageSync('shopInfo', res.data.data);
						   }else{
							   loginOut();
						   }
						   
				       }
				   });
				   
				   
				   
				   
				   

			    },
				fail:function(err){
					loginOut();
				}
			});
			
			
			
			
			
			
			
			
		},
		methods: {
			toStepOne(){
				this.step = 1;
			},
			pickerChangeBusiness(e){
				//console.log(e.detail.value);
				this.businessTypeIndex = e.detail.value;
				this.childTypeId = this.businessSecondTypeList[this.businessTypeIndex].name;
				console.log(this.businessSecondTypeList[this.businessTypeIndex].name);
			},
			radioChange(e){
				this.businessState = e.detail.value;
			},
			handlerImg () {
			  const _self = this;
			  uni.chooseImage({
			    count: 1, //默认9
			    sizeType: ['original', 'compressed'],
			    sourceType: ['album'],
			    success: function (res) {
			      const tempFilePaths = res.tempFilePaths;
			      /*
				  uni.uploadFile({
			        url:CONSTS.BASE_URL+'/basic/upload/single/store',
			        // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
			        filePath: tempFilePaths[0],
			        name: 'file',
			        formData: {
			          'user': 'test'
			        },
			        success: (uploadFileRes) => {
			          
					  const res = JSON.parse(uploadFileRes.data)
			          _self.headImg =CONSTS.BASE_URL+'/basic' + res.data
					  _self.cj=_self.headImg
					  _self.headPath= res.data
					  
						console.log(uploadFileRes);
			        }
			      });
				  */
				  _self.cj = tempFilePaths[0];
			    }
			  });
			},
			confirm(e) {
				uni.showLoading({
					mask: true,   
					title: '上传中'
				});
			   this.cj = ''
					  const _self=this
					  uni.uploadFile({
					    url:CONSTS.BASE_URL+'basic/upload/single/store',
					    // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
					    filePath:e.detail.tempFilePath,
					    name: 'file',
					    formData: {
					      'user': 'test'
					    },
					    success: (uploadFileRes) => {
							uni.hideLoading();
					      const res = JSON.parse(uploadFileRes.data)
					      _self.headImg =CONSTS.FILE_HOST + res.data
					  			  _self.headPath= res.data
					    }
					  });
			},
			cancel() {
			    console.log('canceled');
				this.headImg = '';
				this.cj = '';
				this.headPath = '';
			},
			submitSeptOne(){
				let _self = this;
				
				if(this.shopName == ''){
					uni.showToast({title: '请输入门店名称',icon:'none',duration: 1000});
					return;
				}
				if(this.phone == ''){
					uni.showToast({title: '请输入门店电话',icon:'none',duration: 1000});
					return;
				}
				if(this.childTypeId == 0){
					uni.showToast({title: '请选择经营品类',icon:'none',duration: 1000});
					return;
				}
				if(this.businessState != 1 && this.businessState != 2){
					uni.showToast({title: 'FUCK YOU',icon:'none',duration: 1000});
					return;
				}
				
				if(this.businessState == 1 && this.headPath == ''){
					uni.showToast({title: '请上传门店头像',icon:'none',duration: 1000});
					return;
				}
				
				const param = {
					//step1
					shopName:this.shopName,
					phone:this.phone,
					childTypeId:this.childTypeId,
					businessState:this.businessState,
					headPath:this.headPath,
					//附加显示参数
					headImg:this.headImg,
					businessTypeIndex:this.businessTypeIndex,
					//step2
					licenseImgPath:this.licenseImgPath,
					idcardFrontImgPath:this.idcardFrontImgPath,
					idcardBehindImgPath:this.idcardBehindImgPath,
					//附加显示参数
					licenseImg:this.licenseImg,
					idcardFrontImg:this.idcardFrontImg,
					idcardBehindImg:this.idcardBehindImg,
				}
				console.log(param);
				//uni.showToast({title: '创建成功',icon:'success',duration: 1000});
				
				_self.saveInfo = param;
				uni.setStorageSync('saveInfo', param);
				
				this.step = 2;
				
			},
			handlerImgLicense () {
			  const _self = this;
			  
			  uni.chooseImage({
			    count: 1, //默认9
			    sizeType: ['original', 'compressed'],
			    sourceType: ['album'],
			    success: function (res) {
					uni.showLoading({
						mask: true,   
						title: '上传中'
					});
			      const tempFilePaths = res.tempFilePaths;
			      uni.uploadFile({
			        url:CONSTS.BASE_URL+'basic/upload/single/store',
			        filePath: tempFilePaths[0],
			        name: 'file',
			        formData: {
			          'user': 'test'
			        },
			        success: (uploadFileRes) => {
						uni.hideLoading();
						const res = JSON.parse(uploadFileRes.data)
						_self.licenseImg =CONSTS.FILE_HOST + res.data
						_self.licenseImgPath= res.data
			      					  
						console.log(uploadFileRes);
			        }
			      });
			    }
			  });
			},
			handlerImgIDcardFront () {
			  const _self = this;
			  
			  uni.chooseImage({
			    count: 1, //默认9
			    sizeType: ['original', 'compressed'],
			    sourceType: ['album'],
			    success: function (res) {
					uni.showLoading({
						mask: true,   
						title: '上传中'
					});
			      const tempFilePaths = res.tempFilePaths;
			      uni.uploadFile({
			        url:CONSTS.BASE_URL+'basic/upload/single/store',
			        filePath: tempFilePaths[0],
			        name: 'file',
			        formData: {
			          'user': 'test'
			        },
			        success: (uploadFileRes) => {
						uni.hideLoading();
						const res = JSON.parse(uploadFileRes.data)
						_self.idcardFrontImg =CONSTS.FILE_HOST + res.data
						_self.idcardFrontImgPath= res.data
			      					  
						console.log(uploadFileRes);
			        }
			      });
			    }
			  });
			},
			handlerImgIDcardBehind () {
			  const _self = this;
			  
			  uni.chooseImage({
			    count: 1, //默认9
			    sizeType: ['original', 'compressed'],
			    sourceType: ['album'],
			    success: function (res) {
					uni.showLoading({
						mask: true,   
						title: '上传中'
					});
			      const tempFilePaths = res.tempFilePaths;
			      uni.uploadFile({
			        url:CONSTS.BASE_URL+'basic/upload/single/store',
			        filePath: tempFilePaths[0],
			        name: 'file',
			        formData: {
			          'user': 'test'
			        },
			        success: (uploadFileRes) => {
						uni.hideLoading();
						const res = JSON.parse(uploadFileRes.data)
						_self.idcardBehindImg =CONSTS.FILE_HOST + res.data
						_self.idcardBehindImgPath= res.data
			      					  
						console.log(uploadFileRes);
			        }
			      });
			    }
			  });
			},
			saveSeptTwo(){
				let _self = this;
				if(this.licenseImgPath == ''){
					uni.showToast({title: '请上传营业执照',icon:'none',duration: 1000});
					return;
				}
				
				if(this.idcardFrontImgPath == ''){
					uni.showToast({title: '请上传身份证人像面',icon:'none',duration: 1000});
					return;
				}
				
				if(this.idcardBehindImgPath == ''){
					uni.showToast({title: '请上传身份证国徽面',icon:'none',duration: 1000});
					return;
				}
				
				uni.getStorage({
				    key: 'saveInfo',
				    success: function (res) {
						let saveInfo = res.data;
						
						saveInfo.licenseImgPath = _self.licenseImgPath;
						saveInfo.idcardFrontImgPath = _self.idcardFrontImgPath;
						saveInfo.idcardBehindImgPath = _self.idcardBehindImgPath;
						saveInfo.licenseImg = _self.licenseImg;
						saveInfo.idcardFrontImg = _self.idcardFrontImg;
						saveInfo.idcardBehindImg = _self.idcardBehindImg;
						
						console.log(saveInfo);
						_self.saveInfo = saveInfo;
						uni.setStorageSync('saveInfo', saveInfo);
						
						uni.showToast({title: '保存成功',icon:'success',duration: 1000});
						/*
						setTimeout(() => {
							uni.switchTab({
							    url: '/src/pages/index/index'
							});
						}, 1000);
						*/
						
					},
					fail:function(err){
						
					}
				});
			},
			async submitSeptTwo(){
				
				let _self = this;
				
				
				if(this.shopName == ''){
					uni.showToast({title: '请输入门店名称',icon:'none',duration: 1000});
					return;
				}
				if(this.phone == ''){
					uni.showToast({title: '请输入门店电话',icon:'none',duration: 1000});
					return;
				}
				if(this.childTypeId == 0){
					uni.showToast({title: '请选择经营品类',icon:'none',duration: 1000});
					return;
				}
				if(this.businessState != 1 && this.businessState != 2){
					uni.showToast({title: 'FUCK YOU',icon:'none',duration: 1000});
					return;
				}
				
				if(this.businessState == 1 && this.headPath == ''){
					uni.showToast({title: '请上传门店头像',icon:'none',duration: 1000});
					return;
				}
				
				if(this.licenseImgPath == ''){
					uni.showToast({title: '请上传营业执照',icon:'none',duration: 1000});
					return;
				}
				
				if(this.idcardFrontImgPath == ''){
					uni.showToast({title: '请上传身份证人像面',icon:'none',duration: 1000});
					return;
				}
				
				if(this.idcardBehindImgPath == ''){
					uni.showToast({title: '请上传身份证国徽面',icon:'none',duration: 1000});
					return;
				}
				
				
				let params = {
					"firstManagementTypeId": this.firstManagementTypeId,
					"phone": this.phone,
					'detailAddress': this.shopInfo.detailAddress,
					"shopName": this.shopName,
					"secondManagementTypeId": this.childTypeId,
					'businessState': this.businessState,
					"licensePositive": this.licenseImgPath,
					"idcardImgx": this.idcardFrontImgPath,
					"idcardImgy": this.idcardBehindImgPath
				};
				
				console.log(params);
				
				
				uni.showLoading({
					mask: true,   
					title: '提交中'
				});
				
				
				try {
					const res = await submitShopInformation(params);
					
					console.log(res);
					uni.hideLoading();
					uni.showToast({title: '提交成功',icon:'none',duration: 1000});
					setTimeout(() => {
						uni.switchTab({
						    url: '/src/pages/index/index'
						});
					}, 1000);
				} catch (err) {
					if(err.statusCode!=200 || err.data.code!=200){
						//uni.showToast({title: err.data.message,icon:'none',duration: 1000});
						this.$utils.common.toast.fail(err.data.message);
						if(err.data.code == 1000){
							setTimeout(() => {
								uni.switchTab({
								    url: '/src/pages/index/index'
								});
							}, 1000);
						}
					}else {
						uni.showToast({title: '网络延迟，请稍后再试~',icon:'none',duration: 1000});
					}
				    uni.hideLoading();
				}
				
				
				
			}
		}
	}
</script>

<style>
	
	.item-input-idcard {
		width: 100%;
		height: 280rpx;
		display: flex;
		flex-direction: row;
	}
	
	.item-input-idcard image {
		width: 334rpx;
		height: 244rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}
	
	.item-input-idcard image:last-child {
		margin-left: 10rpx;
	}
	
	.item-input-tips {
		color: #9597A6;
		font-size: 28rpx;
		margin-top: 10rpx;
	}
	
	.item-input-license {
		width: 100%;
		height: 280rpx;
	}
	
	.item-input-license image {
		width: 694rpx;
		height: 244rpx;
		margin: 40rpx auto;
	}
	
	.input-image-con {
		margin-top: 20rpx;
		background: #FFFFFF;
	}
	
	.input-top-shopname {
		font-size: 34rpx;
		color: #333333;
	}
	.input-top-address {
		font-size: 28rpx;
		color: #AAAAAA;
	}
	
	.input-top-btn {
		position: absolute;
		top: 40rpx;
		right: 30rpx;
		border: solid 1rpx #DDDDDD;
		border-radius: 40rpx;
		font-size: 30rpx;
		padding: 10rpx 25rpx;
	}
	
	.input-top {
		background: #FFFFFF;
		padding: 5rpx 0rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
		padding: 30rpx 30rpx;
		line-height: 40rpx;
		position: relative;
		
	}
	
	.input-bottom {
		background: #FFFFFF;
		padding: 5rpx 0rpx;
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
		display: flex;
		flex-direction: row;
	}
	
	.submit-btn {
	   width: 650rpx;
	   margin: 20rpx auto;
	   background: #00D5D4;
	   color: #FFFFFF;
	   border-radius: 60rpx;
	   text-align: center;
	   padding: 20rpx 20rpx;
	   font-size: 30rpx;
	}
	
	.submit-left-btn {
	   width: 330rpx;
	   margin: 20rpx auto;
	   background: #FFFFFF;
	   color: #333333;
	   border-radius: 60rpx;
	   text-align: center;
	   padding: 20rpx 20rpx;
	   font-size: 30rpx;
	   border:#DDDDDD solid 1rpx;
	}
	
	.submit-right-btn {
	   width: 330rpx;
	   margin: 20rpx auto;
	   background: #0CD4D3;
	   color: #FFFFFF;
	   border-radius: 60rpx;
	   text-align: center;
	   padding: 20rpx 20rpx;
	   font-size: 30rpx;
	   border:#0CD4D3 solid 1rpx;
	}
	
	.content-input {
		border-radius: 20rpx;
		background: #FFFFFF;
		width: 100%;
		margin-bottom: 20rpx;
	}
	
	.item-input-upload {
		width: 100%;
		height: 445rpx;
	}
	
	.item-input-upload image {
		width: 694rpx;
		height: 334rpx;
		margin: 40rpx auto;
	}
	
	.item-input-image {
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
		margin: 0rpx 40rpx;
		border-bottom:  solid 1rpx #F1F1F1;
		padding: 40rpx 0rpx;
	}
	
	.item-input {
		display: flex;
		flex-direction: row;
		font-size: 32rpx;
		margin: 0rpx 40rpx;
		border-bottom:  solid 1rpx #F1F1F1;
		padding: 40rpx 0rpx;
	}
	
	.item-select {
		color: #C8C7CC;
		position: relative;
	}
	
	.item-select-arrow {
		width: 18rpx;
		height: 18rpx;
		position: absolute;
		top: 15rpx;
		right: 10rpx;
	}
	
	.item-input-left {
		width: 30%;
		color: #464646;
	}
	.item-input-right {
		width: 70%;
	}
	
	.uni-input {
		width: 100%;
	}
	
	.item-radio {
		
	}
	radio-group {
		display: flex;
		flex-direction: row;
	}
	.item-radio label {
		display: flex;
		flex-direction: row;
		width: 200rpx;
	}
	.item-radio-btn {
		width: 60rpx;
	}
	.item-radio-txt {
		width: 100rpx;
	}
</style>
